import React from "react";

export const LoadingIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" className="Rotating">
    <path d="M23 12c0 1.042-.154 2.045-.425 3h-2.101c.335-.94.526-1.947.526-3 0-4.962-4.037-9-9-9-1.706 0-3.296.484-4.655 1.314l1.858 2.686h-6.994l2.152-7 1.849 2.673c1.684-1.049 3.659-1.673 5.79-1.673 6.074 0 11 4.925 11 11zm-6.354 7.692c-1.357.826-2.944 1.308-4.646 1.308-4.962 0-9-4.038-9-9 0-1.053.191-2.06.525-3h-2.1c-.271.955-.425 1.958-.425 3 0 6.075 4.925 11 11 11 2.127 0 4.099-.621 5.78-1.667l1.853 2.667 2.152-6.989h-6.994l1.855 2.681z" />
  </svg>
);

export const FolderIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M21.604 13l-1.272 7h-16.663l-1.272-7h19.207zm-14.604-11h-6v7h2v-5h3.084c1.38 1.612 2.577 3 4.916 3h10v2h2v-4h-12c-1.629 0-2.305-1.058-4-3zm17 9h-24l2 11h20l2-11z" />
  </svg>
);

export const DotsIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M6 12c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3zm9 0c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3zm9 0c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z" />
  </svg>
);

export const DownloadIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path
      d="M14.0556641,11 L19,11 L12,19 L5,11 L10.0871094,11 L10.0871094,0 L14.0556641,0 L14.0556641,11 Z M18.213,1.754 L17,3.353 C19.984,5.085 22,8.308 22,12 C22,17.514 17.514,22 12,22 C6.486,22 2,17.514 2,12 C2,8.308 4.016,5.085 7,3.353 L5.787,1.754 C2.322,3.857 0,7.651 0,12 C0,18.627 5.373,24 12,24 C18.627,24 24,18.627 24,12 C24,7.651 21.678,3.857 18.213,1.754 Z"
      id="Shape"
    />
  </svg>
);

export const ExportIcon = () => (
  <svg
    width="24"
    height="24"
    fillRule="evenodd"
    clipRule="evenodd"
    viewBox="0 0 24 24"
  >
    <path d="M16 2v7h-2v-5h-12v16h12v-5h2v7h-16v-20h16zm2 9v-4l6 5-6 5v-4h-10v-2h10z" />
  </svg>
);

export const PlayIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M3 22v-20l18 10-18 10z" />
  </svg>
);

export const PauseIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M11 22h-4v-20h4v20zm6-20h-4v20h4v-20z" />
  </svg>
);

export const JigsawIcon = () => (
  <svg width="28" height="24" viewBox="0 0 28 24">
    <path d="M2.479 18c.978 0 1.309-.524 1.708-.922.813-.816 1.813-.469 1.813.847v6.075h6.075c1.315 0 1.663-1 .847-1.813-.398-.399-.922-.73-.922-1.708 0-1.087 1.108-2.479 3-2.479s3 1.392 3 2.479c0 .978-.524 1.309-.922 1.708-.816.813-.469 1.813.847 1.813h6.075v-6.075c0-1.315-1-1.663-1.813-.847-.399.398-.73.922-1.708.922-1.087 0-2.479-1.108-2.479-3s1.392-3 2.479-3c.978 0 1.309.524 1.708.922.813.816 1.813.469 1.813-.847v-6.075h-6.075c-1.315 0-1.663-1-.847-1.813.398-.399.922-.73.922-1.708 0-1.087-1.108-2.479-3-2.479s-3 1.392-3 2.479c0 .978.524 1.309.922 1.708.816.813.469 1.813-.847 1.813h-6.075v6.075c0 1.315-1 1.663-1.813.847-.399-.398-.73-.922-1.708-.922-1.087 0-2.479 1.108-2.479 3s1.392 3 2.479 3z" />
  </svg>
);

export const PlusIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M24 9h-9v-9h-6v9h-9v6h9v9h6v-9h9z" />
  </svg>
);

export const ResizeIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M6.426 10.668l-3.547-3.547-2.879 2.879v-10h10l-2.879 2.879 3.547 3.547-4.242 4.242zm11.148 2.664l3.547 3.547 2.879-2.879v10h-10l2.879-2.879-3.547-3.547 4.242-4.242zm-6.906 4.242l-3.547 3.547 2.879 2.879h-10v-10l2.879 2.879 3.547-3.547 4.242 4.242zm2.664-11.148l3.547-3.547-2.879-2.879h10v10l-2.879-2.879-3.547 3.547-4.242-4.242z" />
  </svg>
);

export const MinusIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M0 10h24v4h-24z" />
  </svg>
);

export const CloseIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z" />
  </svg>
);

export const SelectIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M4 0l16 12.279-6.78 1.138 4.256 8.676-3.902 1.907-4.281-8.758-5.293 4.581z" />
  </svg>
);

export const PencilIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M18.363 8.464l1.433 1.431-12.67 12.669-7.125 1.436 1.439-7.127 12.665-12.668 1.431 1.431-12.255 12.224-.726 3.584 3.584-.723 12.224-12.257zm-.056-8.464l-2.815 2.817 5.691 5.692 2.817-2.821-5.693-5.688zm-12.318 18.718l11.313-11.316-.705-.707-11.313 11.314.705.709z" />
  </svg>
);

export const PersonIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M19.5 15c-2.483 0-4.5 2.015-4.5 4.5s2.017 4.5 4.5 4.5 4.5-2.015 4.5-4.5-2.017-4.5-4.5-4.5zm2.5 5h-2v2h-1v-2h-2v-1h2v-2h1v2h2v1zm-7.18 4h-14.815l-.005-1.241c0-2.52.199-3.975 3.178-4.663 3.365-.777 6.688-1.473 5.09-4.418-4.733-8.729-1.35-13.678 3.732-13.678 6.751 0 7.506 7.595 3.64 13.679-1.292 2.031-2.64 3.63-2.64 5.821 0 1.747.696 3.331 1.82 4.5z" />
  </svg>
);

export const BrickIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M9.408 9.14c-.036 1.615 4.452 1.618 4.397 0v-.957c-.131-1.527-4.271-1.536-4.384-.001h-.013v.958zm2.212-1.381c.764 0 1.385.256 1.385.57s-.621.57-1.385.57-1.385-.256-1.385-.57.621-.57 1.385-.57zm6.785-1.051v-.957c-.132-1.527-4.271-1.536-4.384-.001h-.014v.958c-.035 1.616 4.453 1.619 4.398 0zm-3.57-.81c0-.314.621-.57 1.385-.57s1.385.256 1.385.57c0 .314-.621.57-1.385.57s-1.385-.256-1.385-.57zm8.165.244v12.185l-11 5.673v-12.14l9.864-5.19-10.367-5.517-10.331 5.453 9.834 5.23v12.164l-11-5.674v-12.248l.009.005-.009-.019 11.5-6.064 11.5 6.142zm-18.188-.392h-.014v.958c-.036 1.615 4.451 1.618 4.397 0v-.957c-.131-1.527-4.271-1.535-4.383-.001zm3.583.147c0 .314-.621.571-1.385.571-.765 0-1.385-.256-1.385-.571 0-.314.62-.57 1.385-.57.763 0 1.385.256 1.385.57zm5.411-1.491v-.957c-.132-1.528-4.271-1.536-4.384-.001h-.014v.958c-.036 1.615 4.453 1.618 4.398 0zm-2.185-1.381c.763 0 1.385.256 1.385.57s-.622.571-1.385.571c-.765 0-1.385-.256-1.385-.571s.62-.57 1.385-.57z" />
  </svg>
);

export const EraserIcon = () => (
  <svg
    width="24"
    height="24"
    fillRule="evenodd"
    clipRule="evenodd"
    viewBox="0 0 24 24"
  >
    <path d="M5.662 23l-5.369-5.365c-.195-.195-.293-.45-.293-.707 0-.256.098-.512.293-.707l14.929-14.928c.195-.194.451-.293.707-.293.255 0 .512.099.707.293l7.071 7.073c.196.195.293.451.293.708 0 .256-.097.511-.293.707l-11.216 11.219h5.514v2h-12.343zm3.657-2l-5.486-5.486-1.419 1.414 4.076 4.072h2.829zm.456-11.429l-4.528 4.528 5.658 5.659 4.527-4.53-5.657-5.657z" />
  </svg>
);

export const TriggerIcon = () => (
  <svg
    width="24"
    height="24"
    fillRule="evenodd"
    clipRule="evenodd"
    viewBox="0 0 24 24"
  >
    <path d="M12 .001l12 12-12 12-12-12 12-12z" />
  </svg>
);

export const TriangleIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M24 22h-24l12-20z" />
  </svg>
);

export const SceneIcon = () => (
  <svg
    width="24"
    height="24"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
  >
    <path d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z" />{" "}
  </svg>
);

export const CodeIcon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
  >
    <path d="M5.485 3.567l6.488-3.279c.448-.199.904-.288 1.344-.288 1.863 0 3.477 1.629 3.287 3.616l-7.881 4.496c.118-2.088-1.173-4.035-3.238-4.545zm15.857 8.996c-.928-1.137-4.549-4.567-5.762-6.045l-8.855 5.069-1.083-1.354c1.16-.757 1.431-2.619.632-3.799-1.383-2.042-4.274-1.037-4.274 1.129 0 .653.263 1.412.909 2.225.018.023 7.109 8.25 8.531 9.873.768.874 1.081 1.8 1.061 2.71 8.836-5.572 7.833-4.958 7.996-5.065.98-.643 1.503-1.747 1.503-2.827 0-.691-.214-1.372-.658-1.916zm-13.562 5.937c-2.148 1.09-2.38 3.252-1.222 4.598.545.632 1.265.902 1.943.902 1.476 0 2.821-1.337 1.567-2.877-1.3-1.599-2.288-2.623-2.288-2.623z" />
  </svg>
);

export const SadIcon = () => (
  <svg width="1096" height="974" viewBox="0 0 1096 974" version="1.1">
    <defs>
      <path
        d="M50,0 L846,-1.42108547e-14 C873.614237,-1.92835078e-14 896,22.3857625 896,50 L896,574 C896,684.45695 806.45695,774 696,774 L50,774 C22.3857625,774 3.38176876e-15,751.614237 0,724 L0,50 C-3.38176876e-15,22.3857625 22.3857625,5.07265313e-15 50,0 Z"
        id="path-1"
      />
      <filter
        x="-0.6%"
        y="-0.7%"
        width="101.2%"
        height="101.4%"
        filterUnits="objectBoundingBox"
        id="filter-2"
      >
        <feMorphology
          radius="2"
          operator="erode"
          in="SourceAlpha"
          result="shadowSpreadInner1"
        />
        <feGaussianBlur
          stdDeviation="0.5"
          in="shadowSpreadInner1"
          result="shadowBlurInner1"
        />
        <feOffset
          dx="0"
          dy="-2"
          in="shadowBlurInner1"
          result="shadowOffsetInner1"
        />
        <feComposite
          in="shadowOffsetInner1"
          in2="SourceAlpha"
          operator="arithmetic"
          k2="-1"
          k3="1"
          result="shadowInnerInner1"
        />
        <feColorMatrix
          values="0 0 0 0 0.415686275   0 0 0 0 0.415686275   0 0 0 0 0.415686275  0 0 0 0.5 0"
          type="matrix"
          in="shadowInnerInner1"
          result="shadowMatrixInner1"
        />
        <feMorphology
          radius="2"
          operator="erode"
          in="SourceAlpha"
          result="shadowSpreadInner2"
        />
        <feGaussianBlur
          stdDeviation="0.5"
          in="shadowSpreadInner2"
          result="shadowBlurInner2"
        />
        <feOffset
          dx="0"
          dy="8"
          in="shadowBlurInner2"
          result="shadowOffsetInner2"
        />
        <feComposite
          in="shadowOffsetInner2"
          in2="SourceAlpha"
          operator="arithmetic"
          k2="-1"
          k3="1"
          result="shadowInnerInner2"
        />
        <feColorMatrix
          values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.5 0"
          type="matrix"
          in="shadowInnerInner2"
          result="shadowMatrixInner2"
        />
        <feMerge>
          <feMergeNode in="shadowMatrixInner1" />
          <feMergeNode in="shadowMatrixInner2" />
        </feMerge>
      </filter>
    </defs>
    <g
      id="Artboard"
      stroke="none"
      strokeWidth="1"
      fill="none"
      fillRule="evenodd"
    >
      <g
        id="Group"
        transform="translate(100.000000, 100.000000)"
        fillRule="nonzero"
      >
        <g id="Rectangle-2">
          <use
            fill="black"
            fillOpacity="1"
            filter="url(#filter-2)"
            xlinkHref="#path-1"
          />
          <path
            stroke="#979797"
            strokeWidth="10"
            d="M50,5 C25.1471863,5 5,25.1471863 5,50 L5,724 C5,748.852814 25.1471863,769 50,769 L696,769 C803.695526,769 891,681.695526 891,574 L891,50 C891,25.1471863 870.852814,5 846,5 L50,5 Z"
            strokeLinejoin="square"
          />
        </g>
        <path
          d="M819,76.9627119 L896,76.9627119 L896,104.949153 L0,104.949153 L0,76.9627119 L77,76.9627119 L77,0 L105,0 L105,76.9627119 L791,76.9627119 L791,0 L819,0 L819,76.9627119 Z"
          id="Combined-Shape"
          fill="#979797"
        />
        <path
          d="M114,193.908475 C100.192881,193.908475 89,205.101356 89,218.908475 L89,663.538983 C89,677.346102 100.192881,688.538983 114,688.538983 L662,688.538983 C742.081289,688.538983 807,623.620272 807,543.538983 L807,218.908475 C807,205.101356 795.807119,193.908475 782,193.908475 L114,193.908475 Z"
          id="Rectangle"
          stroke="#979797"
          strokeWidth="10"
          fill="#979797"
        />
      </g>
      <rect
        id="Rectangle"
        stroke="#979797"
        strokeWidth="10"
        fill="#FFFFFF"
        fillRule="nonzero"
        x="339.5"
        y="354.254237"
        width="417.875"
        height="373.938983"
      />
      <text
        id=":-("
        fontFamily="HelveticaNeue-Bold, Helvetica Neue"
        fontSize="200"
        fontWeight="bold"
        fill="#979797"
      >
        <tspan x="450.4" y="596">
          :-(
        </tspan>
      </text>
    </g>
  </svg>
);
